<template>
	<el-dialog v-model="state.dialogVisible" title="忘记密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition" :rules=rules>
			<el-form-item label="账号" prop="account">
				<el-input v-model="forgetData.account" placeholder="请输入您的注册账号"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="email">
				<el-input v-model="forgetData.email" placeholder="请输入您的个人邮箱"></el-input>
			</el-form-item>
		</el-form>
		 <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="state.dialogVisible = false">关闭</el-button>
		        <el-button type="primary" @click="openChangePassword">
		          下一步
		        </el-button>
		      </div>
		    </template>
	</el-dialog>
	<!-- 修改密码 -->
	<el-dialog v-model="state.changePasswordDialog" title="修改密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition" :rules=rules>
			<el-form-item label="请输入您的新密码" prop="account">
				<el-input v-model="forgetData.password" placeholder="请输入您的新密码"></el-input>
			</el-form-item>
			<el-form-item label="再次确认您的新密码" prop="email">
				<el-input v-model="forgetData.repassword" placeholder="请确认您的新密码"></el-input>
			</el-form-item>
		</el-form>
		 <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="state.changePasswordDialog = false">关闭</el-button>
		        <el-button type="primary" @click="resetPassword">
		          确定
		        </el-button>
		      </div>
		    </template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ref,reactive } from 'vue'
	import { verify,reset } from '@/api/login'
	import { ElMessage } from 'element-plus'
	interface formData{
		account:number,
		email:string,
		password:string,
		repassword:string,
	}
	
	const labelPosition = ref("top")
	
	const forgetData:formData = reactive({
		account:null,
		email:"",
		password:"",
		repassword:""
	})
	// 表单规则
	const rules = reactive({
		account:[
			{required:true,message:"请输入你的注册账号",trigger:"blur"},
		],
		email:[
			{required:true,message:"请输入你的注册邮箱",trigger:"blur"},
		],
		password:[
			{required:true,message:"请输入你的新密码",trigger:"blur"},
		],
		repassword:[
			{required:true,message:"请确认你的新密码",trigger:"blur"},
		]
	})
	
	const state = reactive({
		dialogVisible:false,
		changePasswordDialog:false,
	})
	// 打开修改密码弹窗
	const openChangePassword = async ()=>{
		const res = await verify(forgetData);
		if(res.data.status == 0){
			ElMessage({
				message:"验证成功",
				type:"success"
			})
			localStorage.setItem("id",res.data.id)
			state.dialogVisible = false
			state.changePasswordDialog = true
		}else{
			ElMessage({
				message:"验证失败",
				type:"error"
			})
		}
		
		// state.dialogVisible = false
		// state.changePasswordDialog = true
	}
	// 重置密码
	const resetPassword = async ()=>{
		if(forgetData.repassword !== forgetData.password){
			return ElMessage({
				message:"两次密码不一致",
				type:"error"
			})
		}
		const res = await reset(localStorage.getItem("id"),forgetData.repassword);
		if(res.data.status == 0){
			ElMessage({
				message:"修改成功",
				type:"success"
			})
			state.dialogVisible = false
			state.changePasswordDialog = false
		}else{
			ElMessage({
				message:"修改失败",
				type:"error"
			})
		}
	}
	// 打开弹出
	const open = ()=>{
		state.dialogVisible = true
	}
	// 向外暴露open
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
</style>